import React, { Component } from 'react';
import { View,Text, ScrollView } from "react-native";
import { NavigationBar, ListRow, Label } from "teaset";


export default class View3 extends Component {
    constructor(props) {
        super(props);
        this.state = {
            checked: false
        }
    }

    render() {
        return (
            <View>
                <NavigationBar title='Teaset' leftView={<NavigationBar.BackButton title='Back' />} />
                <ScrollView style={{ marginTop: 44 }}>
                    <ListRow
                        title='Swipe able'
                        swipeActions={[
                            <ListRow.SwipeActionButton title='Cancel' />,
                            <ListRow.SwipeActionButton title='Remove' type='danger' onPress={() => alert('Remove')} />,
                        ]}
                        onPress={() => alert('Press!')}
                    />
                    <ListRow title='Long detail' detail={
                        'React Native enables you to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript and React.'
                    } onPress={() => alert('Remove')}/>
                    <ListRow title='Title place top' detail={
                        'React Native enables you to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript and React.'
                    } titlePlace='top' onPress={() => alert('Remove')}/>
                    <ListRow title='Custom detail' detail='This is detail' detailStyle={{ fontSize: 15, color: '#31708f' }} />
                    <ListRow title='Custom detail' detail={
                        <View style={{ backgroundColor: '#5bc0de', width: 60, height: 24, borderRadius: 4,alignItems:'center'}} >
                            <Text style={{color:'red'}}>傻啊你</Text>              
                        </View>
                    } />
                    <ListRow onPress={() => alert('Press!')} title='Title1' detail='Detail1' />
                    <ListRow onPress={() => alert('Press!')} title='Custom title' titleStyle={{ fontSize: 18, color: '#31708f' }} />
                    <ListRow onPress={() => alert('Press!')} title='Title2' detail='Detail2' />
                    <ListRow onPress={() => alert('Press!')} title='Custom title' titleStyle={{ fontSize: 18, color: '#31708f' }} />
                    <ListRow onPress={() => alert('Press!')} title='Title3' detail='Detail3' />
                    <ListRow onPress={() => alert('Press!')} title='Custom title' titleStyle={{ fontSize: 18, color: '#31708f' }} />
                    <ListRow onPress={() => alert('Press!')} title='Title4' detail='Detail4' />
                    <ListRow onPress={() => alert('Press!')} title='Custom title' titleStyle={{ fontSize: 18, color: '#31708f' }} />
                    <ListRow onPress={() => alert('Press!')} title='Title5' detail='Detail5' />
                    <ListRow onPress={() => alert('Press!')} title='Custom title' titleStyle={{ fontSize: 18, color: '#31708f' }} />
                    <ListRow onPress={() => alert('Press!')} title='Title6' detail='Detail6' />
                    <ListRow onPress={() => alert('Press!')} title='Custom title' titleStyle={{ fontSize: 18, color: '#31708f' }} />
                    <ListRow onPress={() => alert('Press!')} title='Title7' detail='Detail7' />
                    <ListRow onPress={() => alert('Press!')} title='Custom title' titleStyle={{ fontSize: 18, color: '#31708f' }} />
                    <ListRow onPress={() => alert('Press!')} title='Title8' detail='Detail8' />
                    <ListRow onPress={() => alert('Press!')} title='Custom title' titleStyle={{ fontSize: 18, color: '#31708f' }} />
                    <ListRow onPress={() => alert('Press!')} title='Title9' detail='Detail9' />
                    <ListRow onPress={() => alert('Press!')} title='Custom title' titleStyle={{ fontSize: 18, color: '#31708f' }} />
                    <ListRow onPress={() => alert('Press!')} title='Title0' detail='Detail0' />
                    <ListRow onPress={() => alert('Press!')} title='Custom title' titleStyle={{ fontSize: 18, color: '#31708f' }} />
                    <ListRow onPress={() => alert('Press!')} title={<Label style={{ fontSize: 18, color: '#31708f' }} text='Custom title' />} />
                    <ListRow onPress={() => alert('Press!')} title={<Label style={{ fontSize: 18, color: '#31708f' }} text='Custom title' />} />
                    <ListRow onPress={() => alert('Press!')} title={<Label style={{ fontSize: 18, color: '#31708f' }} text='Custom title' />} />
                    <ListRow onPress={() => alert('Press!')} title={<Label style={{ fontSize: 18, color: '#31708f' }} text='Custom title' />} />
                    <ListRow onPress={() => alert('Press!')} title={<Label style={{ fontSize: 18, color: '#31708f' }} text='Custom title' />} />
                    <ListRow onPress={() => alert('Press!')} title={<Label style={{ fontSize: 18, color: '#31708f' }} text='Custom title' />} />
                    <ListRow onPress={() => alert('Press!')} title={<Label style={{ fontSize: 18, color: '#31708f' }} text='Custom title' />} />
                    
                </ScrollView>
            </View>
        )
    }
}

module.exports = View3;